<!--
厦门大学计算机专业 | 华为开发专家(HDE)
专注《零基础学编程系列》  http://lblbc.cn/blog
包含：鸿蒙 | Java | 安卓 | 前端 | Flutter | iOS | 小程序
公众号：蓝不蓝编程
-->
<template>
	<view class="column">
		<view class="row">
			<view class="num">{{ num1 }}</view>
			<view class="num">{{ num2 }}</view>
			<view class="num">{{ num3 }}</view>
			<view class="num">{{ num4 }}</view>
			<view class="num">{{ num5 }}</view>
			<view class="num">{{ num6 }}</view>
			<view class="num">{{ num7 }}</view>
		</view>
		<view class="button" @click="createNums">生成</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num1: '0',
				num2: '0',
				num3: '0',
				num4: '0',
				num5: '0',
				num6: '0',
				num7: '0',
			}
		},
		onLoad() {

		},
		methods: {
			createNums() {
				this.num1 = this.random(33)
				this.num2 = this.random(33)
				this.num3 = this.random(33)
				this.num4 = this.random(33)
				this.num5 = this.random(33)
				this.num6 = this.random(33)
				this.num7 = this.random(16)
			},
			random(maxNum){
				return Math.floor(Math.random()*maxNum)+1
			}
		}
	}
</script>

<style>
	.column{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100vh;
	}
	.num{
		height: 40px;
		width: 40px;
		border: 1px solid gray;
		border-radius: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 5px;
	}
	.row{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.button{
		width: 100px;
		height: 50px;
		background-color: #489cf5;
		border-radius: 25px;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20px;
		cursor: pointer;
	}
</style>
